iT邦幫忙

2025 iThome 鐵人賽
DAY 14
0
Vue.js

從零開始學習TypeScript、Vue.js !!系列 第 27 篇

Day 27

17th鐵人賽
68 瀏覽

  • 分享至 

  • xImage
    •  

自定義元件的插槽

元件插槽的基本用法

  • 如果要讓自定義元件支援插槽，需要使用slot標籤來指定插槽位置，例如：
const containerComponent = {
    template:'<div style="border-style:solid;border-color:red; border-width:10px">
        <slot></slot>
    </div>'
}
  • 再次執行程式，可以看到my-container標籤內部的內容已經被新增到了自定義元件的插槽位置。執行結果如下圖：
    https://ithelp.ithome.com.tw/upload/images/20251014/201692827emz618y3u.png
  • 雖然範例程式中只是使用文字作為插槽的內容，實際上插槽中也支援任意的標籤內容或其他元件。

上一篇
Day 26
下一篇
Day 28
系列文
從零開始學習TypeScript、Vue.js !! 共 30 篇
  1. 26
    Day 26
  2. 27
    Day 27
  3. 28
    Day 28
  4. 29
    Day 29
  5. 30
    Day 30
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19776 篇
完賽人數
529 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙